<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <swiper :options="swiperOption" ref="mySwiper">
        <!-- 幻灯内容 -->
        <swiper-slide :key="i" v-for="(str, i) in listImg" v-if="str.type==type">

          <span @click="toUrl(str.runUrl)">
            <img :src="sourceUrl+str.imgUrl" style="height:100%" />
          </span>
        </swiper-slide>
        <!-- 以下控件元素均为可选 -->
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import global from '../public/global.vue'

  export default {
    props: ['listImg','type'],
    data() {
      return {
        data: {},
        swiperOption: {
          notNextTick: true,

          // 所有配置均为可选（同Swiper配置）
          initialSlide: 0,
//          pagination: '.swiper-pagination',
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          loop: false,
          speed: 400,
          direction: 'horizontal',
          paginationClickable: true,
          mousewheelControl: true,
          autoplay: {
            delay:5000,
            autoplay:true
          },
          autoplayDisableOnInteraction: false,
          observer: true,
          observeParents: true,
          debugger: true,
          onTransitionStart(swiper) {
            console.log(1111);
          },

        },
        sourceUrl:global.sourceUrl
      }
    },
    methods: {
      toUrl(url){
        window.location.href=url;
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }

    },
    mounted() {
      this.swiper.onTouchEnd(function (e) {
        console.log(e);
      });
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .swiper-container {
    width: 100%;
    height:100%;
    .swiper-wrapper {
      width: 100%
      height: 100%
    }
    .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 100%
      height: 100%
      img {
        width: 100%
        height: 100%
      }
    }
    .swiper-pagination-bullet-active {
      background: #d43d3d;
    }
  }
</style>
